﻿@{
    ViewBag.Title = "分类";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/styles/singer.css" rel="stylesheet" />
<div id="app" class="">
    <div class="main">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="height:40px;line-height:40px;padding-left:40px">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>分类</el-breadcrumb-item>
            <el-breadcrumb-item><font style="font-weight:800">歌曲分类</font></el-breadcrumb-item>
        </el-breadcrumb>
        <p>
            <ul class="theme">
                <li class="founs" @@click="searchTheme('')">全部</li>
                <li v-for="item in Theme" @@click="searchTheme(item.ThemeId)">{{item.ThemeName}}</li>
            </ul>
        </p>
        <p>
            <ul class="genre">
                <li class="founs" @@click="searchGenre('')">全部</li>
                <li v-for="item in Genre" @@click="searchGenre(item.GenreId)">{{item.GenreName}}</li>
            </ul>
        </p>
        <span style="padding-left:40px"> <font style="font-weight:700">歌曲列表</font>&nbsp;<font style="font-size:14px;">共{{pagenation.totalCount}}首</font></span>
        <el-table :data="MusicLists" ref="MusicLists" stripe v-loading="dataLodaing" style="margin:0 40px">
            <template slot="empty">
                <p>{{dataText}}</p>
            </template>
            <el-table-column type="index" width="80" label="序号">
            </el-table-column>
            <el-table-column prop="Musics.MusicName" label="歌曲名" width="220" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="Singer.SingerName" label="歌手" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-link :underline="false" @@click="singerLink(scope.row.Singer.SingerId)">{{scope.row.Singer.SingerName}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="Albums.AlbumName" label="专辑" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-link :underline="false" @@click="albumLink(scope.row.Albums.AlbumId)">{{scope.row.Albums.AlbumName}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="Musics.MusicLong" label="时长" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-on:click="ListenMusic(scope.row)" type="text" size="small"><i class="el-icon el-icon-headset" style="font-size:18px;" title="试听"></i></el-button>
                    <el-button v-on:click="BuyMusic(scope.row)" type="text" size="small"><i class="el-icon el-icon-shopping-cart-2" style="font-size:18px;" title="选购"></i></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="MusicLists.length != 0" class="typePage">
            <el-pagination background layout="prev, pager, next" :pager-count="6" :total="pagenation.totalCount" v-on:current-change="CurrentChange" :current-page="pagenation.currentPage" :page-size="30">
            </el-pagination>
        </div>
    </div>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data() {
            return {
                Genre: [],
                Theme: [],
                search: {
                    theme: '',
                    genre: '',
                },
                MusicLists: [],
                dataLodaing: false,
                pagenation: {
                    currentPage: 1,
                    totalCount: 0,
                },//分页信息
                dataText: "",
            }
        },
        methods: {
            GetTheme() {
                axios.post('/Home/GetAllThemeMusic').then(res => {
                    this.Theme = res.data.data
                })
            },
            GetGenre() {
                axios.post('/Home/GetAllGenreMusic').then(res => {
                    this.Genre = res.data.data              
                })
            },
            searchTheme(val) {
                this.search.theme = val
                this.GetMusicLists()
            },
            searchGenre(val) {
                this.search.genre = val
                this.GetMusicLists()
            },
            GetMusicLists() {
                this.dataLodaing = true;
                axios.post('/Music/GetTypeMusicLists', { 'CurrentPage': this.pagenation.currentPage, 'GenreId': this.search.genre, 'ThemeId': this.search.theme }).then(res => {
                    this.MusicLists = res.data.data
                    this.pagenation.totalCount = res.data.totalCount
                    this.dataLodaing = false;

                })
            },
            CurrentChange(val) {
                this.pagenation.currentPage = val
                this.GetMusicLists();
            },
            ListenMusic(row) {
                var info = JSON.parse(localStorage.getItem("ListenMusicLists")) || []
                if (info != []) {
                    if (info[0].MusicId != row.Musics.MusicId) {
                        let music = [{
                            'MusicId': row.Musics.MusicId,
                            'cover': '../musicImg/cover3.jpg',
                            'src': '../music/星弟 _ 小贱（谭冰尧） - 不想做朋友.mp3',
                            'title': row.Musics.MusicName + '-' + row.Singer.SingerName,
                        }]
                        localStorage.setItem('ListenMusicLists', JSON.stringify(music));
                        $(function () {
                            var setConfig = {
                                song: JSON.parse(localStorage.getItem('ListenMusicLists')),
                                error: function (meg) {
                                    console.log(meg);
                                }
                            };
                            var audioFn = audioPlay(setConfig);
                            if (audioFn) {
                                audioFn.loadFile(true);
                            }
                        });
                        this.$message({
                            message: '正在播放，请稍等...',
                            type: 'success'
                        });
                        axios.post('/Music/AddClickCount', { 'id': row.Musics.MusicId })
                    }
                }


            },
            BuyMusic(row) {
                var lists = localStorage.getItem('BuyLists')
                lists = lists ? JSON.parse(lists) : [];
                const buy = {
                    'id': row.Musics.MusicId,
                    'MusicName': row.Musics.MusicName,
                    'SingerName': row.Singer.SingerName,
                    'MusicLong': row.Musics.MusicLong,
                    'MusicBit': row.Musics.MusicBitRate,
                    'MusicAblum': row.Albums.AlbumName
                }
                let count = 0;
                if (lists.length > 0) {
                    for (var i = 0; i < lists.length; i++) {
                        if (row.Musics.MusicId == lists[i].id) {
                            count = count + 1;
                            this.$message.error('已经存在此歌曲!');
                            break;
                        }
                    }
                }
                if (count == 0) {
                    lists.push(buy);
                    this.$message({
                        message: '成功加入购物车',
                        type: 'success'
                    });
                }
                localStorage.setItem("BuyLists", JSON.stringify(lists));

            },
            singerLink(id) {
                window.open('/Music/SingerdetailInfo?id=' + id, "_blank");
            },
            albumLink(id) {
                window.open('/Album/AlbumList?id=' + id, "_blank");
            }
        },
        mounted() {
            this.GetGenre();
            this.GetTheme();
            this.GetMusicLists();
        }
    })
    $(".theme").on("click", "li", function () {
        $(".theme li").removeClass("founs");
        $(this).addClass("founs");
    })
    $(".genre").on("click", "li", function () {
        $(".genre li").removeClass("founs");
        $(this).addClass("founs");
    })
</script>

